<?php /*a:3:{s:65:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\products\dateils.html";i:1747897276;s:67:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header_vue3.html";i:1747733208;s:66:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\wangEditor.html";i:1747733208;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-SHGH6Q51ZE');
      </script>

    <link rel="stylesheet" href="/static/css/element-plus.css">
    <script src="/static/js/vue3.js"></script>
    <script src="/static/js/element-plus.js"></script>
    <script src="/static/js/element-plus-icon.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/moment.js"></script>
    <script src="/static/js/zhCNForElementPLUS.js"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>


<link href="/static/css/wang-editor.css" rel="stylesheet"></link>
<script src="/static/js/wang-editor.js"></script>

<style scoped>
    .el-select-dropdown {
        padding: 0;
    }

    .dateil {
        padding: 0px 20px 10px 0px;
        font-size: 16px;
        font-weight: 700;
    }
</style>

</head>

<body>
    <div id="app" v-cloak>
        <el-card style="width: 100%;">
            <el-breadcrumb separator="/">
                <el-breadcrumb separator="/">
                    <el-page-header @back="goBack" content="产品列表"></el-page-header>
                </el-breadcrumb>
            </el-breadcrumb>
        </el-card>
        <br>

        <el-card style="width: 100%;">
            <el-descriptions title="产品基本信息:" class="margin-top" :column="9" direction="vertical" border>
                <el-descriptions-item label="产品图片" border>
                    <el-image :preview-teleported="true" :z-index="999999" :src="list.img"
                        style="width:150;height:100px" :preview-src-list="[list.img]" /></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="产品名称">{{list.title}}</el-descriptions-item>
                <el-descriptions-item label="产品条码">{{list.code}}</el-descriptions-item>
                <el-descriptions-item label="产品款号">{{list.localsku}}</el-descriptions-item>
                <el-descriptions-item label="产品价格(￥)">{{list.price}}</el-descriptions-item>
                <el-descriptions-item label="产品分类">{{list.catego_name}}</el-descriptions-item>
                <el-descriptions-item label="产品供应商">{{list.supplier_name}}</el-descriptions-item>
                <el-descriptions-item label="所属仓库">{{list.storage_name}}</el-descriptions-item>
                <el-descriptions-item label="上架时间">{{list.createtime}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card style="width: 100%;margin-top: 20px;">
            <div class="dateil">子体信息:</div>
            <el-row v-if="details.length > 0">
                <el-col :span="4" v-for="(item1,index1) in details">

                    <div style="line-height: 30px;"> {{item1.localsku}} </div>
                </el-col>
            </el-row>
            <div v-if="details.length == 0">
                <el-divider>该款产品没有子体信息</el-divider>
            </div>
        </el-card>

        <el-card style="width: 100%;margin-top: 20px;">
            <div class="dateil">产品详情:</div>
            <div id="editor-container"></div>
        </el-card>
    </div>


    <script>

        let { createApp, nextTick } = Vue;

        const {
            createEditor,
            createToolbar
        } = window.wangEditor;

        let app = createApp({
            el: '#app',
            data: function () {
                return {
                    searchForm: {
                        id: <?php echo htmlentities($id); ?>
                    },
                    id: <?php echo htmlentities($id); ?>,
                    list: [],
                    details: [],
                    editor: '',

                }

            },
            mounted() {
                this.getDatalist()
                //  
            },
            methods: {
                //返回上一个页面
                goBack() {
                    window.location.href = '/admin/products/index';
                },

                async getDatalist() {
                    let loading = this.$loading({
                        lock: true,
                        text: '数据加载中···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    const res = await axios.post('/admin/products/dateils', { params: this.searchForm })
                    loading.close()
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }
                    this.list = res.info.list
                    this.getcontentlist()
                    this.details = res.info.details

                },

                getcontentlist() {
                    nextTick(() => {
                        if (!this.editor) {
                            this.editor = createEditor({

                                selector: "#editor-container",
                                html: this.list.content,
                                mode: "default",
                            });

                            this.editor.disable();
                        } else {
                            this.editor.setHtml(this.list.content);
                        }
                    });
                }
            },
        })
        app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });

        Object.keys(ElementPlusIconsVue).forEach((key) => {
            app.component(key, ElementPlusIconsVue[key]);
        });

        app.mount("#app");
    </script>
</body>

</html>